<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件详解</title>
</head>
<body>
<div id="root">
<child1></child1>
    <child2></child2>
</div>
<template id="child1">
    <div>
    <h1>{{c1}}</h1>
    <h2>呵呵</h2>
        <h2>{{}}</h2>
    </div>
</template>
<template id="child2">
    <div>
        <h1>{{c2}}</h1>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let child1={
        template:"#child1",
        data: function () {
return {
    c1:"hello child1"
}
        },
        methods: {

        }

    }
    let child2={
        template: "#child2",
        data:function () {
return{
    c2:"hello child2"
}
        }
    }
    let root =new Vue({
        el:"#root",
        data:{
root:"hello root"
        },
        components: {
            // 方法一
            // child1:{
            //     template:"#child1"
            // },
            //方法二
            // child1:child1
            //方法三
            child1,
            child2
        }
    })
</script>